// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes


// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
  padding: $navbar-padding-y $navbar-padding-x;
}


// Navbar brand
//
// Used for brand, project, or site names.

.navbar-brand {
  display: inline-block;
  padding-top: $navbar-brand-padding-y;
  padding-bottom: $navbar-brand-padding-y;
  margin-right: $navbar-padding-x;
  font-size: $navbar-brand-font-size;
  line-height: inherit;
  white-space: nowrap;
}


// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).

.navbar-nav {
  display: inline-block;

  .nav-item {
    display: inline-block;
  }
  .nav-link {
    padding-right: rem2px(.5);
    padding-left: rem2px(.5);
  }
}


// Navbar text
//
//

.navbar-text {
  display: inline-block;
  padding-top: $nav-link-padding-y;
  padding-bottom: $nav-link-padding-y;
}

// Navbar themes
//
// Styles for switching between navbars with light or dark background.

// Dark links against a light background
.navbar-light {
  .navbar-brand {
    color: $navbar-light-active-color;

    @include hover-focus {
      color: $navbar-light-active-color;
    }
  }

  .navbar-nav {
    .nav-link {
      @include text {
        color: $navbar-light-color;
      }

      @include hover-focus {
        @include text {
          color: $navbar-light-hover-color;
        }
      }

      &.disabled {
        @include text {
          color: $navbar-light-disabled-color;
        }
      }
    }

    .show .nav-link,
    .active .nav-link,
    .nav-link.show,
    .nav-link.active {
      @include text {
        color: $navbar-light-active-color;
      }
    }
  }

  .navbar-text {
    color: $navbar-light-color;
    a {
      color: $navbar-light-active-color;

      @include hover-focus {
        color: $navbar-light-active-color;
      }
    }
  }
}

// White links against a dark background
.navbar-dark {
  .navbar-brand {
    color: $navbar-dark-active-color;

    @include hover-focus {
      color: $navbar-dark-active-color;
    }
  }

  .navbar-nav {
    .nav-link {
      @include text {
        color: $navbar-dark-color;
      }

      @include hover-focus {
        @include text {
          color: $navbar-dark-hover-color;
        }
      }

      &.disabled {
        @include text {
          color: $navbar-dark-disabled-color;
        }
      }
    }

    .show .nav-link,
    .active .nav-link,
    .nav-link.show,
    .nav-link.active {
      @include text {
        color: $navbar-dark-active-color;
      }
    }
  }

  .navbar-text {
    color: $navbar-dark-color;
    a {
      color: $navbar-dark-active-color;

      @include hover-focus {
        color: $navbar-dark-active-color;
      }
    }
  }
}
